<template>
<div class="my-img-text" :class="classes">
  <div class="my-img-text__img" :class="imageClass">
    <slot name="image"></slot>
  </div>
  <div class="my-img-text__txt" :style="textStyle">
    <slot name="text"></slot>
  </div>
</div>
</template>
<style lang="scss" scope>
</style>
<script>
/**
   *  图文混排组件
   *  @module $ui/components/my-img-text
   */

  /**
   * 插槽 slots
   * @member slots
   * @property {string} image 定义图表区域内容
   * @property {string} text 定义文本区域内容
   */
export default {
  name: 'MyImgText',
  /**
   * 属性参数
   * @property {String} [imagePlace=left] 图片放置位置, 可选值：left、right、top
   * @property {String} [imageWidth] 图片宽度。imagePlace 为left 或 right ，wrap为false时，需要设置 imageWidth
   * @property {Boolean} [wrap=true] 文字是否围绕图片
   */
  props: {
    imagePlace: {
      type: String,
      default: 'left',
      validator(val) {
        return ['left', 'top', 'right'].includes(val)
      }
    },
    // imagePlace 为left 或 right ，wrap为false时，需要设置 imageWidth
    imageWidth: {
      type: String
    },
    // 文字是否围绕图片
    wrap: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      return [
        `my-img-text--${this.imagePlace}`,
        {'my-img-text--wrap': this.wrap}
      ]
    },
    imageClass() {
      return {
        'my-img-text--wrap': this.wrap
      }
    },
    textStyle() {
      if (this.wrap) return null
      const style = {}
      switch (this.imagePlace) {
        case 'left':
          style.paddingLeft = this.imageWidth
          break
        case 'right':
          style.paddingRight = this.imageWidth
          break
      }
      return style
    }
  },
  methods: {
  },
  created() {},
  mounted() {}
}
</script>